<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta name="format-detection" content="telephone=no"/>
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
	<title>Stock Valuation</title>
	<link rel="stylesheet" type="text/css" href="//fonts.gmirror.org/css?family=Roboto:300,400,500,700">
  	<link rel="stylesheet" type="text/css" href="//fonts.gmirror.org/icon?family=Material+Icons">
  	<!-- Bootstrap -->
 	<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
 	<link rel="stylesheet" type="text/css" href="css/bootstrap-material-design.min.css">
  	<link rel="stylesheet" type="text/css" href="css/ripples.min.css">
  	<style type="text/css">
  		.jumbotron{
  			padding-bottom:0px !important;
  		}
  		.jumbotron .p{
  			margin-bottom:0px;
  		}
  		
  		.fcf-result .panel-body{
  			padding-left:30px;
  			padding-right:30px;
  		}

  	</style>
</head>
<body>

<div class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-inverse-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="javascript:void(0)">OppsIs Stock</a>
    </div>
    <div class="navbar-collapse collapse navbar-inverse-collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="index.jsp" title="MorningStar Free Cash Flow Model">FCF</a></li>
        <li ><a href="keyratio.jsp"  title="MorningStar Stock Key Ratio Data">Key Ratio</a></li>
        
      </ul>

    </div>
  </div>
</div>
<div class="container-fluid">
	<div class="jumbotron">
	  <h4>输入参数</h4>
		<div class="alert alert-dismissible alert-warning hide">
			 <button type="button" class="close" data-dismiss="alert">×</button>
			<p>基期自由现金流，折现率，永续增长率，第一阶段开始年，第一阶段结束年，现金流增长率为必填字段，且结束年应该大于开始年</p>
		</div>
		<form class="form-inline">
		  <div class="form-group">
		    <input type="number" class="form-control" id="baseFCF" placeholder="第一期自由现金流">
		  </div>
		  
		  <div class="form-group">
		    <input type="number" class="form-control" id="discountRatio" placeholder="折现率%">
		  </div>
		  <div class="form-group">
		    <input type="number" class="form-control" id="gdpRatio" placeholder="永续增长率%，一般3%">
		  </div>
		  <div class="form-group">
		    <input type="number" class="form-control" id="shares" placeholder="股本">
		  </div>
		</form>
		<form class="form-inline">
		  <div class="form-group">
		    <input type="number" class="form-control" id="year1Start"  placeholder="第一阶段开始年">
		  </div>
		  <div class="form-group">
		    <input type="number" class="form-control" id="year1End"  placeholder="第一阶段结束年">
		  </div>
		  <div class="form-group">
		    <input type="number" class="form-control" id="growRatio1" placeholder="现金流增长率%">
		  </div>
		  <div class="form-group">
		    <input type="number" class="form-control optional" id="year2Start" placeholder="第二阶段开始年，可选">
		  </div>
		  <div class="form-group">
		    <input type="number" class="form-control optional" id="year2End" placeholder="第二阶段结束年，可选">
		  </div>
		  <div class="form-group">
		    <input type="number" class="form-control optional" id="growRatio2" placeholder="现金流增长率%">
		  </div>
		</form>
	
	
	  <p class="row"><a class="btn btn-primary btn-lg pull-right" id="startCal">开始计算</a></p>
	</div>
	
	<div class="fcf-result">
		<div class="panel panel-primary">
		  <div class="panel-heading">股票内在价值</div>
		  <div class="panel-body">
		   	<h2 id="finalVal"></h2>
			<a class="btn btn-info hide" style="padding-left: 5px;padding-right: 5px;" id="showDetails">查看详情</a>
			<p class="result-detail"></p>
		  </div>
		</div>
		
	
	</div>
</div>

<script src="http://apps.bdimg.com/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script type="text/javascript">
	var yearNV = [],everNV=0,result=0,lastYearCF=0;
	
	$("#startCal").click(function(){
		yearNV = [];
		everNV=0;
		result=0;
		var idx,baseFCF = +$("#baseFCF").val(),discountRatio = +$("#discountRatio").val(),
			gdpRatio = +$("#gdpRatio").val(),shares = +$("#shares").val(),
			year1Start = +$("#year1Start").val(),year1End = +$("#year1End").val(),growRatio1 = +$("#growRatio1").val(),
			year2Start = +$("#year2Start").val(),year2End = +$("#year2End").val(),growRatio2 = +$("#growRatio2").val();
		
		for(idx=year1Start;idx<=year1End;idx++){
			lastYearCF = baseFCF*Math.pow(1+growRatio1/100,idx-year1Start);
			yearNV[idx] = lastYearCF/Math.pow(1+discountRatio/100,idx);
			result += yearNV[idx];
		}
		
		if(year2Start && year2End && growRatio2){
			for(idx=year2Start;idx<=year2End;idx++){
				lastYearCF = lastYearCF*(1+growRatio2/100);
				yearNV[idx] = lastYearCF/Math.pow(1+discountRatio/100,idx);
				result += yearNV[idx];
			}
		}
		
		everNV = lastYearCF*(1+gdpRatio/100)/(discountRatio/100-gdpRatio/100);
		everNV = everNV/Math.pow(1+discountRatio/100,idx-1);
		result+=everNV;
		
		$("#finalVal").html((result/shares).toFixed(1));
		
		$("#showDetails").removeClass("hide");
		$(".result-detail").html("");
		
	});
	
	$("#showDetails").click(function(){
		
		var str="<p>增长期净现值：</p>";
		for(var i=0;i<yearNV.length;i++){
			if(yearNV[i]){
				str+="<p>"+i+"："+yearNV[i].toFixed(1)+"</p>";
			}
		}
		str+="<p>永续净现值："+everNV.toFixed(1)+"</p>";
		str+="<h4>总净现值："+result.toFixed(1)+"</h4>";
		$(".result-detail").html(str);
	});
</script>
</body>
</html>